<template>
    <div>
        <transition-group class="card-deck mt-5 flex-wrap justify-content-center" name="list-complete">
            <Card v-for="card in filterList" class="list-complete-item" :key="card.id" :content="card.content" :title="card.title"/>
        </transition-group>
        <a-pagination
            v-model="current"
            :page-size-options="pageSizeOptions"
            :total="total"
            show-size-changer
            :page-size="pageSize"
            class="text-center mt-3"
            @showSizeChange="onShowSizeChange"
        >
            <template slot="buildOptionText" slot-scope="props">
                <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                <span v-if="props.value === '50'">全部</span>
            </template>
        </a-pagination>
    </div>
</template>

<script>
    import Card from "@/components/Card";

    export default {
        name: "CardList",
        props: {
            url: String
        },
        components: {
          Card
        },
        data: () => ({
            info: "",
            pageSizeOptions: ['10', '20', '30', '40', '50'],
            current: 1,
            pageSize: 10,
            total: 50,
            list: [
                {
                    id: 1,
                    title: "商品房",
                    content: "商品房是房地产开发企业开发建设，并且按照市场的价格出售的房屋，只要没有被限购政策限制的人都可以购买。"
                },
                {
                    id: 2,
                    title: "房改房",
                    content: "房改房也就是公有住房，如果是按照成本价格购买的，房屋的产权就归职工个人。但如果是按照标准价格购买的，那么职工拥有部分的房屋权，一般在五年之后就归职工个人。"
                },
                {
                    id: 3,
                    title: "集资房",
                    content: "集资房是国有单位组织并提供的国有划拨土地，作为建房用地。国家减免了部分的税费，参加集资的职工部分或是全额的出资建设。房屋建成之后归职工所有，不对外出售"
                },
                {
                    id: 4,
                    title: "经济房",
                    content: "经济房是根据国家经济适用住房设计安排建设的住宅，用地一般都是实行划拨的方式，免收土地出让金，实行减半征收。"
                },
                {
                    id: 5,
                    title: "公租房",
                    content: "公租房是又国家提供政策的支持，然后由社会主体通过新建，或是其他方式筹集房源，面向中低收入全体出租的保障住房。公租房不归个人，归政府或是公共机构。"
                },
                {
                    id: 6,
                    title: "廉租房",
                    content: "廉租房是政府由租金补贴或是实物配租的方式，给符合标准并且住房困难的家庭童工的保障性住房。分配形式是以租金补贴为主，实物配租和租金减免为辅。"
                },
                {
                    id: 7,
                    title: "安置房",
                    content: "安置房是政府对于因为城市规划，或是土地开发等原因进行了拆迁，给被拆迁人或是承租人居住的房屋。"
                },
                {
                    id: 8,
                    title: "小产权房",
                    content: "小产权房是农民集体土地上建设的房屋，没有缴纳土地出让金等费用，产权证是由乡政府或是村委会颁发。"
                },
                {
                    id: 9,
                    title: '集资房',
                    content: "集资房是国有单位组织并提供的国有划拨土地，作为建房用地。国家减免了部分的税费，参加集资的职工部分或是全额的出资建设。房屋建成之后归职工所有，不对外出售。"
                },
                {
                    id: 10,
                    title: '经济房',
                    content: "经济房是根据国家经济适用住房设计安排建设的住宅，用地一般都是实行划拨的方式，免收土地出让金，实行减半征收。"
                },
            ],
        }),
        methods: {
            onShowSizeChange(current, pageSize) {
                this.pageSize = pageSize;
            }
        },
        created() {
            this.$bus.$on('click', info => this.info = info)
        },
        // async mounted() {
        //    this.list = await axios_get(this.url,this.info);
        // },
        computed: {
            filterList() {
                if (!Array.isArray(this.list)){
                    throw new Error(this.list);
                }
                if (this.info) {
                    return this.list.filter(it => it.title.includes(this.info)).sort(()=>Math.random()-.5);
                }
                return this.list;
            }
        },
    }
</script>

<style scoped>
    .list-complete-item{
        transition: all 0.8s ease;
        margin: 10px;
    }

    .list-complete-enter-from, .list-complete-leave-to {
        opacity: 0;
    }

    .list-complete-leave-active {
        position: absolute;
    }
</style>
